<template>
  <div class="card">
    <div class="card-container">
      <p class="card-title">{{ props.title }}</p>
      <div class="card-main">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
})
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100%;
  // padding: 8px;
  .card-container {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 21, 41);
    border-radius: 6px;
    .card-title {
      height: 56px;
      line-height: 56px;
      text-align: center;
      font-size: 18px;
      color: #fff;
      font-weight: 700;
    }
    .card-main {
      width: 100%;
      height: calc(100% - 56px);
    }
  }
}
</style>
